<doc>地图组件</doc>
<template>
  <div class="map-div">
    <!-- 地图渲染DOM -->
    <div id="map-ol"></div>

    <!-- 图层选择组件 -->
    <layerSelect v-if="layerSelectShow" v-model="mapTypeName"></layerSelect>
    <!-- 鼠标绘制多边形 -->
    <drawCom
      v-if="mapConfig.mouseDraw"
      :mapObject="mapObject"
      @drawFinsh="drawFinsh"
    ></drawCom>
    <!-- 状态栏 -->
    <statusBar
      v-if="mapObject"
      :mapObject="mapObject"
      :mapConfig="mapConfig"
    ></statusBar>
  </div>
</template>
<script>
import MapObject from "./js/map";
import layerSelect from "./components/layerSelect.vue";
import statusBar from "./components/statusBar.vue";
import drawCom from "./components/drawCom.vue";
export default {
  components: {
    layerSelect, // 图层选择组件
    statusBar, // 状态栏
    drawCom, // 鼠标绘制多边形
  },

  data() {
    return {
      mapObject: null, // 地图引擎加载对象
      mapTypeName: "GDM", // 地图引擎默认加载底图。可选择值：GDM、TSM、TSLM、Google、OMS（默认）
      layerSelectShow: true, // 是否开启底图选择器。true 显示比例尺；flase 不显示比例尺
      mapConfig: {
        // 地图属性配置
        mouseMove: true, // 开始鼠标移动事件
        mapMoved: true, // 地图移动完成事件
        mouseDraw: true, // 鼠标绘制
      },
    };
  },

  watch: {
    mapTypeName: {
      // 监听底图切换
      handler(newVal, oldVal) {
        this.mapObject.changeMap(this.mapTypeName);
      },
    },
  },

  mounted() {
    this.initMap(); // 初始化地图引擎
  },

  methods: {
    // 初始化地图引擎
    initMap() {
      // 初始化地图引擎。(DOM ID，初始中心点坐标数组, 初始层级, 初始底图, 其他配置对象)
      this.mapObject = new MapObject(
        "map-ol",
        [116.403694, 39.924896],
        10,
        this.mapTypeName,
        {
          scale: true, // 开启比例尺
          ...this.mapConfig,
        }
      );
    },

    // 完成绘制覆盖物回调
    drawFinsh(points) {
      console.log(points);
    }
  },
};
</script>
<style scoped>
.map-div,
#map-ol {
  height: 100%;
  width: 100%;
  background-color: #a4cdff;
  position: relative;
}

div /deep/.ol-attribution,
div /deep/.ol-zoom {
  display: none;
}

.draw-div {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 12px;
  padding: 5px 10px;
  background-color: #fff;
  box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
}

.draw-btn {
  width: 100%;
  margin: 5px 0;
  cursor: pointer;
}
</style>
